<template>
  <div class="box">
    <!-- 主图 -->
    <div
      class="small_box"
      @mouseover="mouseEnterSmall"
      @mouseout="mouseLeaveSmall"
      @mousemove="mousemoveSmall"
    >
      <img :src="imgList[activeIndex]" alt="" />
      <div class="mask" :style="{left:curPos.x,top:curPos.y}"></div>
    </div>
    <ul class="img_list">
      <li v-for="(item, index) in imgList" :key="index" @mouseenter="activeIndex = index">
        <img :src="item" alt="" />
      </li>
    </ul>

    <!-- 大图 -->
    <div class="big_box">
      <img class="big_img" :src="imgList[activeIndex]" alt="" />
    </div>
  </div>
</template>

<script>
/*
   1.分析需求(交互)：
      1.1 鼠标移入小盒子smallBox  : 显示 遮罩层mask 和  大盒子bigBox
      1.2 鼠标移出小盒子smallBox  : 隐藏 遮罩层mask 和  大盒子bigBox
      1.3 鼠标移动小盒子smallBox
        a. mask 跟随鼠标移动
        b. 鼠标在mask中心
        c. 边界检测 ： mask只能在smallBox中移动
        d. 大盒子中的图片对应移动
          * 假设mask尺寸 100*100.  大盒子尺寸200*200. 鼠标每移动1px, 大盒子图片移动 = 1 * 大盒子/mask
*/
export default {
  name: 'GoodsImgs',
  data () {
    return {
      activeIndex: 0,
      curPos: {
        x: 0,
        y: 0
      },
      imgList: [
        'https://yanxuan-item.nosdn.127.net/226b2acb4b0b96837a32f7c032570dc0.png',
        'https://yanxuan-item.nosdn.127.net/637c5a7057b66d67b74c2dbc4d790285.png',
        'https://yanxuan-item.nosdn.127.net/c1de17fecac5899b49c893c5ef2bfa20.png',
        'https://yanxuan-item.nosdn.127.net/2a757c11d4a029d5becf34aeb7b48bbe.png',
        'https://yanxuan-item.nosdn.127.net/8dce28d5fff275b7adc2ba91ac368497.png'
      ]
    }
  },
  methods: {
    mouseEnterSmall () {
      const mask = document.querySelector('.mask')
      const bigBox = document.querySelector('.big_box')
      mask.style.display = 'block'
      bigBox.style.display = 'block'
    },
    mouseLeaveSmall () {
      const mask = document.querySelector('.mask')
      const bigBox = document.querySelector('.big_box')
      mask.style.display = 'none'
      bigBox.style.display = 'none'
    },
    mousemoveSmall (e) {
      const box = document.querySelector('.box')
      const mask = document.querySelector('.mask')
      // const bigBox = document.querySelector('.big_box')
      const bigImg = document.querySelector('.big_img')

      // console.log('e.pageX', e.pageX)
      // console.log('e.pageY', e.pageY)
      // a. mask 跟随鼠标移动
      var x = e.pageX - box.offsetLeft
      var y = e.pageY - box.offsetTop

      // b. 鼠标在mask中心
      x -= mask.offsetWidth / 2
      y -= mask.offsetHeight / 2

      // c. 边界检测
      x = x < 0 ? 0 : x
      y = y < 0 ? 0 : y
      x = x > 250 ? 250 : x
      y = y > 250 ? 250 : y

      mask.style.left = x + 'px'
      mask.style.top = y + 'px'

      // d. 大盒子中的图片对应移动
      bigImg.style.left = -x + 'px'
      bigImg.style.top = -y + 'px'
      // bigImg.style.left = -x * bigBox.offsetWidth / mask.offsetWidth + 'px'
      // bigImg.style.top = -y * bigBox.offsetHeight / mask.offsetHeight + 'px'
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;
   margin: 100px;

    // border: solid;
  .small_box {
    width: 400px;
    height: 400px;
    position: relative;
    //  border: solid;
     border: 1px solid #ccc;
    overflow: hidden;
    img {
      width: 400px;
      height: 400px;
    }
    .mask {
      width: 150px;
      height: 150px;
      background-color: rgba(255, 255, 0, 0.3);
      position: absolute;
      left: 0;
      top: 0;
      cursor: move;
      display: none;
    }
  }
  .img_list {
    width: 80px;
    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;
      img {
        width: 60px;
      }
    }
  }
  .big_box {
    width: 500px;
    height: 500px;
    position: absolute;
    left: 410px;
    top: 0;
    overflow: hidden;
    display: none;
    img {
      position: absolute;
    }
  }
}
</style>
